<template>
   <div id="myWelfare">
        <!--后退-->
        <img class="back" src="../../../assets/task/back.png" alt="" onclick="history.go(-1)">
        <!--限时好货-->
        <div id="activity">
                <div class="title">
                    <p>限时好货</p>
                    <p><router-link :to="{name:'myWelfareMore',params:{type:1}}"  style="text-decoration:none;">更多</router-link></p>
                </div>
                <div class="shops">
                    <div class="welfareInfo" :style="'background-size:100% 100%;background-image:url('+item.cover+')'" v-for="item in limitedTime">
                        <div>
                            <div class="userCard" >
                                <p class="del"><router-link :to="{path:'/myWelfareFormat/'+item.id}" style="text-decoration:none;color:#fff;">详情</router-link></p>
                                <section>
                                    <p>{{item.welfareExchangeModel.welfareName}}</p>
                                    <p>{{item.welfareExchangeModel.welfareDetailed}}</p>
                                </section>
                            </div>
                            <section class="integral">
                                <p>100积分</p>
                                <p>剩余10份</p>
                            </section>
                        </div>
                        
                    </div>
                </div>
        </div>
        <!--超级好货-->
        <div id="activity">
                <div class="title">
                    <p>超级好货</p>
                    <p><router-link :to="{name:'myWelfareMore',params:{type:2}}" style="text-decoration:none;">更多</router-link></p>
                </div>
                <div class="shops" >
                    <div class="welfareInfo" :style="'background-size:100% 100%;background-image:url('+item.cover+')'" v-for="item in superGoods">
                        <div>
                            <div class="userCard" >
                                <p class="del"><router-link :to="{path:'/myWelfareFormat/'+item.id}" style="text-decoration:none;color:#fff;">详情</router-link></p>
                                <section>
                                    <p>{{item.welfareExchangeModel.welfareName}}</p>
                                    <p>{{item.welfareExchangeModel.welfareDetailed}}</p>
                                </section>
                            </div>
                            <section class="integral">
                                <p>100积分</p>
                                <p>剩余10份</p>
                            </section>
                        </div>
                    </div>
                </div>
        </div>
        <!--美食抵用-->
        <div id="activity">
                <div class="title">
                    <p>美食抵用</p>
                    <p><router-link :to="{name:'myWelfareMore',params:{type:3}}" style="text-decoration:none;">更多</router-link></p>
                </div>
                <div class="shops" >
                    <div class="welfareInfo" :style="'background-size:100% 100%;background-image:url('+item.cover+')'" v-for="item in coupon">
                        <div>
                            <div class="userCard" >
                                <p class="del"><router-link :to="{path:'/myWelfareFormat/'+item.id}" style="text-decoration:none;color:#fff;">详情</router-link></p>
                                <section>
                                    <p>{{item.welfareExchangeModel.welfareName}}</p>
                                    <p>{{item.welfareExchangeModel.welfareDetailed}}</p>
                                </section>
                            </div>
                            <section class="integral">
                                <p>100积分</p>
                                <p>剩余10份</p>
                            </section>
                        </div>
                    </div>
                </div>
        </div>
        
   </div>
</template>
<script>
import genre from '../../../server/welfareType.js'
export default {
  data () {
    return {
        limitedTime:[],
        superGoods:[],
        coupon:[],
        genre:genre,
        //限时好货
        form1:{
            type:1,
            pageSize:2,
            pageNumber:1,
            flag:1,
        },
        //超级好货
        form2:{
            type:2,
            pageSize:2,
            pageNumber:1,
            flag:1,
        },
        //美食抵用
        form3:{
            type:3,
            pageSize:2,
            pageNumber:1,
            flag:1,
        }

    }
  },
  created(){
    this.getLimitedTime(this.form1);
    this.getSuperGoods(this.form2);
    this.getCoupon(this.form3);
  },
  methods:{
    //限时好货
    getLimitedTime(val){
        this.$api.myWelfareInfo(val).then(res=>{
            if(res.code=='000000'){
                this.limitedTime =res.data.list;
                console.log(this.limitedTime)
                this.limitedTime.forEach((item)=>{
                    if(item.welfareExchangeModel.welfareName.length>5){
                        item.welfareExchangeModel.welfareName=item.welfareExchangeModel.welfareName.substring(0,5) + "..."
                    }
                    if(item.welfareExchangeModel.welfareDetailed.length>10){
                        item.welfareExchangeModel.welfareDetailed=item.welfareExchangeModel.welfareDetailed.substring(0,10) + "..."
                    }
                })
            }
        });
    },
    //超级好货
    getSuperGoods(val){
        this.$api.myWelfareInfo(val).then(res=>{
            if(res.code=='000000'){
                this.superGoods = res.data.list;
                this.superGoods.forEach((item)=>{
                    if(item.welfareExchangeModel.welfareName.length>5){
                        item.welfareExchangeModel.welfareName=item.welfareExchangeModel.welfareName.substring(0,5) + "..."
                    }
                    if(item.welfareExchangeModel.welfareDetailed.length>10){
                        item.welfareExchangeModel.welfareDetailed=item.welfareExchangeModel.welfareDetailed.substring(0,10) + "..."
                    }
                })
            }
        });
    },
    //美食抵用
    getCoupon(val){
        this.$api.myWelfareInfo(val).then(res=>{
            if(res.code=='000000'){
                this.coupon = res.data.list;
                this.coupon.forEach((item)=>{
                    if(item.welfareExchangeModel.welfareName.length>5){
                        item.welfareExchangeModel.welfareName=item.welfareExchangeModel.welfareName.substring(0,5) + "..."
                    }
                    if(item.welfareExchangeModel.welfareDetailed.length>10){
                        item.welfareExchangeModel.welfareDetailed=item.welfareExchangeModel.welfareDetailed.substring(0,10) + "..."
                    }
                })
            }
        });
    },
    
  }
}    
</script>
<style>
#myWelfare .back{
    height:1rem;
    width:0.6rem;
    margin:1rem 0.6rem 1rem 1rem;
}
#myWelfare #activity{
    width:100%;
    height:8.75rem;
}
#myWelfare #activity .title{
    line-height:1.25rem;
    margin:0.5rem;
    padding:0rem 1rem;
    display:flex;
    justify-content:space-between;
}
#myWelfare #activity .title > p:nth-child(1){
    font-size:0.8rem;
    color:#24a188;
}
#myWelfare #activity .title > p:nth-child(2){
    font-size:0.8rem;
    color:#888888;
    margin-right:0.5rem;
}
#myWelfare #activity .title > p:nth-child(2)::after{
    position: relative;
    top:0.05rem;
    left:0.25rem;
    content:url(../../../assets/welfare/goTO.png)
}
#myWelfare #activity .shops{
    padding:0 1rem;
    height:6.5rem;
    display:flex;
    justify-content:space-between;
}
#myWelfare #activity .shops .welfareInfo{
    height:6.5rem;
    border-radius:8px;
    width:48%;
    color:#fff;
    box-shadow:0.05rem 0.05rem 0.05rem 0.05rem #888888;
}
#myWelfare #activity .shops .welfareInfo > div{
    height:6.5rem;
    border-radius:8px;
    padding:0.8rem 0.5rem;
    background:rgba(0,0,0,0.5)
}
#myWelfare #activity .shops .userCard > .del{
    float:right;
    background:#2a9e94;
    border-radius:8px;
    font-size:0.8rem;
    height:1.25rem;
    line-height:1.25rem;
    text-align:center;
    width:2.75rem;
}
#myWelfare #activity .shops .userCard > .del::after{
    position: relative;
    top:0.1rem;
    left:0.25rem;
    content:url(../../../assets/welfare/back.png)
}
#myWelfare #activity .shops .userCard > section{
    clear:both;
    position: relative;
    top:-0.5rem;
    left:0.25rem;
    font-size:0.7rem;
    
}
#myWelfare #activity .shops .integral{
    height:1.5rem;
    line-height:1.5rem;
    width:100%;
    display:flex;
    justify-content:space-between;
    font-size:0.8rem;
}

</style>